<template>
    <div class="main">
         <el-form class="section" :model="formData"  size="medium" ref="form" label-width="150px">
            <el-form-item label="活动名称:" prop="activityName" :rules="commonRules.notNullRule">
                <el-input v-model="formData.activityName" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="活动时间:" prop="tempDateRange" :rules="commonRules.notNullRule">
                <el-date-picker
                  v-model="formData.tempDateRange"
                  type="datetimerange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="淘宝活动推广链接:" prop="link" :rules="commonRules.notNullRule">
                <el-input v-model="formData.link"  type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="是否需要中间页:" prop="centerPage">
                <el-radio v-model="formData.centerPage" :label="1">是</el-radio>
                <el-radio v-model="formData.centerPage" :label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="中间页装修配置" v-if="formData.centerPage===1">
            </el-form-item>
            <el-form-item label="背景图:" prop="centerPageBgUrl" v-if="formData.centerPage===1" :rules="commonRules.notNullRule">
               <el-upload class="avatar-uploader" accept="image/*" :action="upladUrl" name="file" :show-file-list="false"
                :on-success="(res)=>{formData.centerPageBgUrl = replaceImgUrl(res.filePath)}" :before-upload="beforeUploadAd">
                <img v-if="formData.centerPageBgUrl" :src="formData.centerPageBgUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div style="color: #F56C6C">图片推荐比例750*1600</div>
            </el-form-item>
            <el-form-item label="活动跳转按钮图片:" prop="centerPageBtnUrl" v-if="formData.centerPage===1" :rules="commonRules.notNullRule">
               <el-upload class="avatar-uploader" accept="image/*" :action="upladUrl" name="file" :show-file-list="false"
                :on-success="(res)=>{formData.centerPageBtnUrl = replaceImgUrl(res.filePath)}" :before-upload="beforeUploadAd">
                <img v-if="formData.centerPageBtnUrl" :src="formData.centerPageBtnUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div style="color: #F56C6C">图片推荐比例60*200</div>
            </el-form-item>
            <el-form-item>
            <el-button type="success" :loading="btnLoading" @click="save">保存</el-button>
            <el-button type="info" plain @click="$router.back()">取消</el-button>
        </el-form-item>
         </el-form>    
    </div>    
</template>
<script>
import { tbActivityGet, tbActivityAdd, tbActivityUpdate } from '@/api/bihuasuan/taobaoActivity'
export default {
    name: 'b-taobaoEdit',
    data() {
        return {
            formData:{
                activityName:'',
                tempDateRange: [],
                startTime: '',
                endTime: '',
                activityId: '1',
                link: '',
                centerPage:0,
                centerPageBgUrl:'',
                centerPageBtnUrl: ''
            },
            btnLoading:false
        }
    },
    created() {
        if(this.$route.params.id) {
            this.getData()
        }
    },
    methods:{
        async getData() {
            try {
                const { data } = await tbActivityGet({id:this.$route.params.id})
                // this.list = data.list
                this.formData={
                    ...data,
                    tempDateRange:[data.startTime, data.endTime]
                }
            } catch (error) {
                console.log(error)
            }
        },
        beforeUploadAd(file) {
            console.log(file)
            if (!file.type.match('image/')) {
                this.$message.error('请上传图片')
                return false
            }
            // if (file.type.match('image/gif')) {
            //     this.$message.error('请上传png/jpg格式图片')
            //     return false
            // }
            const isLt1M = file.size / 1024 / 1024 < 5
            if (!isLt1M) {
                this.$message.error('上传图片大小不能超过 5MB!')
            }
            return isLt1M
        },
        save() {
            this.$refs.form.validate(valid => {
                if(valid) {
                    this.formData.startTime = this.formData.tempDateRange[0]
                    this.formData.endTime = this.formData.tempDateRange[1]
                    if(this.$route.params.id) {
                        tbActivityUpdate(this.formData).then((res) => {
                            if(res.code===200) {
                                this.$message.success('新建成功')
                                this.$router.back()
                            }
                        })
                    } else {
                        tbActivityAdd(this.formData).then((res) => {
                            if(res.code===200) {
                                this.$message.success('编辑成功')
                                this.$router.back()
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../styles/_mixin.scss';
</style>